import React, {FC, useEffect} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import icon_star from '../../../assets/icon_star.png';
import icon_new_follow from '../../../assets/icon_new_follow.png';
import icon_comments from '../../../assets/icon_comments.png';
import MessageStore from '../../../stores/MessageStore';
import Unread from './Unread';
import {observer} from 'mobx-react';
type PropsType = {};
const Header: FC<PropsType> = observer(() => {
  useEffect(() => {
    MessageStore.getUnread();
  }, []);
  const {newFollow, unreadFavorate, comment} = MessageStore.unread;
  return (
    <View style={styles.headerLayout}>
      <View style={styles.headerItem}>
        <View>
          <Image source={icon_star} style={styles.itemImg} />
          {unreadFavorate && <Unread count={unreadFavorate} />}
        </View>
        <Text style={styles.itemTxt}>赞和收藏</Text>
      </View>
      <View style={styles.headerItem}>
        <View>
          <Image source={icon_new_follow} style={styles.itemImg} />
          {newFollow && <Unread count={newFollow} />}
        </View>
        <Text style={styles.itemTxt}>新增关注</Text>
      </View>
      <View style={styles.headerItem}>
        <View>
          <Image source={icon_comments} style={styles.itemImg} />
          {comment && <Unread count={comment} />}
        </View>
        <Text style={styles.itemTxt}>评论和@</Text>
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  headerLayout: {
    width: '100%',
    paddingHorizontal: 16,
    paddingVertical: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerItem: {
    flex: 1,
    alignItems: 'center',
  },
  itemImg: {
    width: 60,
    height: 60,
    resizeMode: 'contain',
  },
  itemTxt: {
    fontSize: 16,
    color: '#333',
    marginTop: 8,
  },
});
export default Header;
